<template>
  <div class="browsing-history-page">
    <a-card title="浏览历史">
      <div v-if="historyList.length === 0" class="empty-state">
        <a-empty description="暂无浏览历史" />
      </div>
      <div v-else>
        <a-list
          :grid="{ gutter: 16, column: 4 }"
          :data-source="historyList"
          class="image-list"
        >
          <template #renderItem="{ item }">
            <a-list-item>
              <a-card hoverable class="image-card">
                <a-image
                  :src="item.url"
                  :alt="item.name"
                  class="image-preview"
                  :preview="false"
                />
                <div class="image-info">
                  <h3 class="image-title">{{ item.name }}</h3>
                  <p class="image-description">{{ item.description }}</p>
                  <div class="image-meta">
                    <span class="meta-item">{{ item.category }}</span>
                    <span class="meta-item">{{ formatDate(item.viewTime) }}</span>
                  </div>
                </div>
              </a-card>
            </a-list-item>
          </template>
        </a-list>
        <div class="pagination-container">
          <a-pagination
            v-model:current="currentPage"
            :total="total"
            :page-size="pageSize"
            @change="handlePageChange"
          />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'

// 模拟数据类型
interface HistoryItem {
  id: number
  url: string
  name: string
  description: string
  category: string
  viewTime: string
}

// 分页相关状态
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(0)

// 浏览历史列表
const historyList = ref<HistoryItem[]>([])

// 格式化时间
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 获取浏览历史
const fetchHistory = async () => {
  try {
    // 模拟API调用
    // 实际项目中应该调用后端接口获取浏览历史
    historyList.value = [
      {
        id: 1,
        url: 'https://picsum.photos/300/200?random=1',
        name: '风景图片1',
        description: '美丽的自然风景',
        category: '自然',
        viewTime: '2023-05-15T10:30:00Z'
      },
      {
        id: 2,
        url: 'https://picsum.photos/300/200?random=2',
        name: '城市夜景',
        description: '繁华的城市夜景',
        category: '城市',
        viewTime: '2023-05-14T20:15:00Z'
      },
      {
        id: 3,
        url: 'https://picsum.photos/300/200?random=3',
        name: '动物世界',
        description: '可爱的动物',
        category: '动物',
        viewTime: '2023-05-13T14:45:00Z'
      }
    ]
    total.value = historyList.value.length
  } catch (error) {
    message.error('获取浏览历史失败')
  }
}

// 处理分页变化
const handlePageChange = (page: number) => {
  currentPage.value = page
  fetchHistory()
}

// 组件挂载时获取数据
onMounted(() => {
  fetchHistory()
})
</script>

<style scoped>
.browsing-history-page {
  padding: 24px;
}

.image-list {
  margin-top: 24px;
}

.image-card {
  border-radius: 8px;
  overflow: hidden;
}

.image-preview {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.image-info {
  padding: 12px;
}

.image-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.image-description {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.image-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.meta-item {
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.empty-state {
  text-align: center;
  padding: 48px 0;
}
</style>